import { Flex } from "antd";
import { formatNumberToWan, getOrderIcon } from "../Common/commonData";
import styles from "./WeiBoCard.module.css";
import { LABEL } from "./WeiBoData";
import { useUser } from "@/hook/useUser/useUser";

export function WeiBoCard({ item = {}, style = {}, top = false }) {
  const { openInNewWindow } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";

  return (
    <a href={item.url} target={target} className={styles["weibo-card-link"]}>
      <Flex
        justify="space-between"
        align="center"
        className={styles["weibo-card"]}
        style={style}>
        {/* 左侧内容区 */}
        <Flex justify="start" align="center" gap="middle" flex={9}>
          <div className={styles["order-badge"]}>
            {getOrderIcon(item.order, top)}
          </div>
          <div className={styles.title} title={item.title}>
            {item.title}
          </div>
          {item.extra_content?.label && (
            <div
              className={`${styles.label} ${
                styles[LABEL[item.extra_content.label]]
              }`}>
              {item.extra_content.label}
            </div>
          )}
        </Flex>

        {/* 右侧热度区 */}
        {item.extra_content?.hot && (
          <Flex flex={1.5} className={styles["hot-value"]}>
            <span>热度值: {formatNumberToWan(item.extra_content?.hot)}</span>
          </Flex>
        )}
      </Flex>
    </a>
  );
}
